<template>
  <div class="profile">
    <!-- 用户信息卡片 -->
    <div class="user-card bg-gradient-to-r from-blue-500 to-purple-600 px-4 py-6 text-white">
      <div class="flex items-center">
        <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mr-4">
          <i class="fas fa-user text-2xl text-white"></i>
        </div>
        <div class="flex-1">
          <h2 class="text-xl font-bold">{{ userInfo.name }}</h2>
          <p class="text-white/80 text-sm">{{ userInfo.role }} | {{ userInfo.department }}</p>
          <div class="flex items-center mt-2">
            <div class="bg-white/20 px-2 py-1 rounded text-xs mr-2">
              工号：{{ userInfo.employeeId }}
            </div>
            <div class="bg-white/20 px-2 py-1 rounded text-xs">
              入职：{{ userInfo.joinDate }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 统计数据 -->
    <div class="stats-section px-4 py-4 bg-gray-50">
      <div class="grid grid-cols-3 gap-4 mb-6">
        <div class="bg-white rounded-xl p-4 text-center shadow-sm">
          <div class="text-2xl font-bold text-blue-600">{{ stats.totalCases }}</div>
          <div class="text-xs text-gray-500 mt-1">交通事故案件</div>
        </div>
        <div class="bg-white rounded-xl p-4 text-center shadow-sm">
          <div class="text-2xl font-bold text-green-600">{{ stats.approvedCases }}</div>
          <div class="text-xs text-gray-500 mt-1">成功立案</div>
        </div>
        <div class="bg-white rounded-xl p-4 text-center shadow-sm">
          <div class="text-2xl font-bold text-orange-600">{{ stats.pendingCases }}</div>
          <div class="text-xs text-gray-500 mt-1">材料审核中</div>
        </div>
      </div>

      <!-- 功能菜单 -->
      <div class="space-y-4">
        <!-- 工作相关 -->
        <div class="bg-white rounded-xl p-4 shadow-sm">
          <h3 class="font-semibold text-gray-800 mb-3 flex items-center">
            <i class="fas fa-briefcase text-blue-600 mr-2"></i>工作管理
          </h3>
          <div class="grid grid-cols-2 gap-3">
            <div class="flex items-center p-3 bg-gray-50 rounded-lg" @click="viewMyTasks">
              <i class="fas fa-tasks text-blue-600 mr-3"></i>
              <div>
                <div class="text-sm font-medium text-gray-800">我的任务</div>
                <div class="text-xs text-gray-500">{{ stats.pendingTasks }} 个待处理</div>
              </div>
            </div>
            <div class="flex items-center p-3 bg-gray-50 rounded-lg" @click="viewWorkReport">
              <i class="fas fa-chart-bar text-green-600 mr-3"></i>
              <div>
                <div class="text-sm font-medium text-gray-800">工作报告</div>
                <div class="text-xs text-gray-500">查看统计</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 个人设置 -->
        <div class="bg-white rounded-xl p-4 shadow-sm">
          <h3 class="font-semibold text-gray-800 mb-3 flex items-center">
            <i class="fas fa-user-cog text-purple-600 mr-2"></i>个人设置
          </h3>
          <div class="space-y-3">
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg" @click="editProfile">
              <div class="flex items-center">
                <i class="fas fa-edit text-gray-600 mr-3"></i>
                <span class="text-sm font-medium text-gray-800">编辑个人信息</span>
              </div>
              <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg" @click="changePassword">
              <div class="flex items-center">
                <i class="fas fa-key text-gray-600 mr-3"></i>
                <span class="text-sm font-medium text-gray-800">修改密码</span>
              </div>
              <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg" @click="notificationSettings">
              <div class="flex items-center">
                <i class="fas fa-bell text-gray-600 mr-3"></i>
                <span class="text-sm font-medium text-gray-800">通知设置</span>
              </div>
              <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
          </div>
        </div>

        <!-- 帮助与反馈 -->
        <div class="bg-white rounded-xl p-4 shadow-sm">
          <h3 class="font-semibold text-gray-800 mb-3 flex items-center">
            <i class="fas fa-question-circle text-orange-600 mr-2"></i>帮助与反馈
          </h3>
          <div class="space-y-3">
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg" @click="viewHelp">
              <div class="flex items-center">
                <i class="fas fa-book text-gray-600 mr-3"></i>
                <span class="text-sm font-medium text-gray-800">使用帮助</span>
              </div>
              <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg" @click="contactSupport">
              <div class="flex items-center">
                <i class="fas fa-headset text-gray-600 mr-3"></i>
                <span class="text-sm font-medium text-gray-800">联系客服</span>
              </div>
              <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg" @click="submitFeedback">
              <div class="flex items-center">
                <i class="fas fa-comment-alt text-gray-600 mr-3"></i>
                <span class="text-sm font-medium text-gray-800">意见反馈</span>
              </div>
              <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
          </div>
        </div>

        <!-- 退出登录 -->
        <div class="bg-white rounded-xl p-4 shadow-sm">
          <button 
            @click="logout"
            class="w-full flex items-center justify-center p-3 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition-colors"
          >
            <i class="fas fa-sign-out-alt mr-2"></i>
            <span class="font-medium">退出登录</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 编辑个人信息弹窗 -->
    <div v-if="showEditModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-end">
      <div class="bg-white w-full rounded-t-xl max-h-[80vh] overflow-y-auto">
        <div class="sticky top-0 bg-white px-4 py-3 border-b flex items-center justify-between">
          <h2 class="font-bold text-gray-800">编辑个人信息</h2>
          <button @click="showEditModal = false" class="text-gray-500">
            <i class="fas fa-times"></i>
          </button>
        </div>
        
        <div class="p-4">
          <div class="space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">姓名</label>
              <input 
                v-model="editForm.name"
                type="text" 
                class="w-full px-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              >
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">手机号</label>
              <input 
                v-model="editForm.phone"
                type="tel" 
                class="w-full px-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              >
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">邮箱</label>
              <input 
                v-model="editForm.email"
                type="email" 
                class="w-full px-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              >
            </div>
          </div>
          
          <div class="flex space-x-3 pt-6">
            <button 
              @click="showEditModal = false"
              class="flex-1 bg-gray-100 text-gray-800 py-3 rounded-lg"
            >
              取消
            </button>
            <button 
              @click="saveProfile"
              class="flex-1 bg-blue-600 text-white py-3 rounded-lg"
            >
              保存
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'

export default {
  name: 'MarketingProfile',
  setup() {
    const userStore = useUserStore()
    const router = useRouter()
    const showEditModal = ref(false)
    
    const userInfo = reactive({
      name: '张市场',
      role: '交通事故案件专员',
      department: '市场部',
      employeeId: 'MKT001',
      joinDate: '2023-06',
      phone: '138****1234',
      email: 'zhang@example.com'
    })
    
    const stats = reactive({
      totalCases: 148,      // 总录入交通事故案件数
      approvedCases: 135,   // 通过的交通事故案件数
      pendingCases: 13,     // 待审核的交通事故案件数
      pendingTasks: 7       // 待处理任务数
    })
    
    const editForm = reactive({
      name: userInfo.name,
      phone: userInfo.phone,
      email: userInfo.email
    })
    
    const viewMyTasks = () => {
      alert('查看我的任务')
    }
    
    const viewWorkReport = () => {
      alert('查看工作报告')
    }
    
    const editProfile = () => {
      editForm.name = userInfo.name
      editForm.phone = userInfo.phone
      editForm.email = userInfo.email
      showEditModal.value = true
    }
    
    const saveProfile = () => {
      userInfo.name = editForm.name
      userInfo.phone = editForm.phone
      userInfo.email = editForm.email
      showEditModal.value = false
      alert('个人信息已更新')
    }
    
    const changePassword = () => {
      alert('修改密码功能开发中...')
    }
    
    const notificationSettings = () => {
      alert('通知设置功能开发中...')
    }
    
    const viewHelp = () => {
      alert('使用帮助功能开发中...')
    }
    
    const contactSupport = () => {
      alert('联系客服功能开发中...')
    }
    
    const submitFeedback = () => {
      alert('意见反馈功能开发中...')
    }
    
    const logout = () => {
      if (confirm('确定要退出登录吗？')) {
        userStore.logout()
        router.push('/login')
      }
    }
    
    return {
      userInfo,
      stats,
      editForm,
      showEditModal,
      viewMyTasks,
      viewWorkReport,
      editProfile,
      saveProfile,
      changePassword,
      notificationSettings,
      viewHelp,
      contactSupport,
      submitFeedback,
      logout
    }
  }
}
</script>

<style scoped>
.profile {
  background-color: #f8fafc;
  min-height: 100vh;
}

.user-card {
  margin-bottom: 0;
}

.stats-section {
  background-color: #f8fafc;
}
</style> 